main {
	width: 100%;
	height: 100vh;
	.goback {
		top: 15px;
		left: 15px;
		z-index: 70;
	}
	.container {
		width: 100%;
		height: 600px;
		background-color: #e8e8e8;
		.vid {
			width: 100%;
			height: 450px;
			// background-color: #666;
			> video {
				width: 100%;
				height: 450px;
			}
		}
		.courseIntro {
			height: 120px;
			.part {
				font-size: 50px;
				font-weight: bold;
				margin-bottom: 15px;
			}
			.partName {
				font-size: 14px;
			}
		}
	}
	.control {
		width: 100%;
		height: 90px;
		> span {
			font-size: 28px;
		}
	}
}
#mask {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(18, 156, 219, 0.9);
	z-index: 70;
	.slogan {
		height: 200px;
		width: 100%;
		padding-top: 30px;
	}
	.play {
		width: 100%;
		height: 120px;
		padding: 10%;
		margin-bottom: 100px;
		.start {
			width: 120px;
			height: 120px;
			padding: 10%;
			background-color: #79f0c2;
			border-radius: 50%;
			span {
				font-size: 30px;
			}
		}
		.end {
			width: 120px;
			height: 120px;
			padding: 10%;
			background-color: #ff6060;
			border-radius: 50%;
			span {
				font-size: 30px;
			}
		}
	}
	.playing {
		width: 100%;
		height: 80px;
		border: 1px solid #e8e8e8;
		border-radius: 10px;
		.left {
			width: 45%;
			height: 100%;

			// background-color: #e8e8e8;
			border-bottom-left-radius: 10px;
			border-top-left-radius: 10px;
			> video {
				width: 100%;
				height: 100%;
			}
		}
		.right {
			width: 55%;
			height: 100%;
			padding: 5%;
		}
	}
}
